<template>
	<view class="particulars" :data-theme="theme">
		<view class="particulars_card_top">
			<view class="particulars_header">
				<view class="header_left">
					<view style="opacity: 0.5; margin-right: 15px; font-size: 15px; flex-shrink: 0;">订单号</view>
					<view style="font-size: 14px;">{{ orderMessage.orderNo }}</view>
				</view>
				<view class="header_right" v-if="orderMessage.status == 0" style="color: blue;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 1" style="color: orange;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 2" style="color: purple;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 3" style="color: green;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 4" style="color: red;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 5" style="color: #999999;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 6" style="color: magenta;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<view class="header_right" v-else-if="orderMessage.status == 9" style="color: pink;">
					{{ orderMessage.status | orderStatusFilter }}
				</view>
				<!-- <view class="header_right" :style="getStatusColor(orderMessage.status)">{{orderMessage.status}}
					{{ orderMessage.status | orderStatusFilter }}
				</view> -->
			</view>
			<view class="particulars_body">
				<view class="particulars_body_top" v-for="order in orderDetailList" :key="order.id">
					<!-- 渲染的图片 -->
					<image :src="order.image" mode="" class="top_left"></image>
					<!-- <view class="top_right">
						<view><span class="top_right_weight">商品名称：</span> {{ order.productName }}</view>
						<view><span class="top_right_weight">商品售价：</span> <span>￥{{ order.price }}</span> </view>
						<view><span class="top_right_weight">商品规格：</span> <span>{{ order.sku }}</span> </view>
						<view><span class="top_right_weight">数量：</span> <span>{{ order.payNum }}{{order.specUnit ? (JSON.parse(order.specUnit).sellUnit || '') : ''}}</span></view>
					</view> -->
					<view class="top_right">
						<view class="top_right_weight">{{ order.productName }}</view>
						<view><span>单价：</span>
							<span
								class="top_right_weight">￥{{ order.price }}/{{order.specUnit ? (JSON.parse(order.specUnit).sellUnit || '') : ''}}</span>
						</view>
						<view><span>数量：</span>
							<span
								class="top_right_weight">{{ order.payNum }}{{order.specUnit ? (JSON.parse(order.specUnit).sellUnit || '') : ''}}</span>
						</view>
					</view>
				</view>
				<view class="particulars_body_bottom">
					<view class="bottom_list">
						<view style="display:flex;">
							<view style="margin-right:3px;">商品总价</view>
						</view>
						<view>￥{{ orderMessage.totalPrice }}</view>
					</view>
					<view class="bottom_list">
						<view style="display:flex;">
							<view style="margin-right:3px;">商户优惠金额</view>
						</view>
						<view>-￥{{ orderMessage.couponPrice }}</view>
					</view>

				</view>
			</view>
			<view class="particulars_footer">
				<view class="particulars_foote_top">
					共{{ orderMessage.totalNum }}件商品，实际支付<span>￥{{ orderMessage.payPrice }}</span></view>
				<view class="particulars_footer_bottom">实际支付仅供参考，实际支付以订单实际完成情况为准</view>
			</view>
		</view>

		<view class="particulars_card_bottom">
			<!--  -->
			<h1>订单详情</h1>
			<h2>用户信息</h2>
			<view class="order">
				<view class="order_message">用户昵称:</view>
				<view>{{ orderMessage.nikeName }}</view>
			</view>
			<view class="order">
				<view class="order_message">用户电话:</view>
				<view>{{ orderMessage.phone }}</view>
			</view>
			<h2>收获信息</h2>
			<view class="order">
				<view class="order_message">收货人:</view>
				<view>{{ orderMessage.realName }}</view>
			</view>
			<view class="order">
				<view class="order_message">收获人电话:</view>
				<view>{{ orderMessage.userPhone }}</view>
			</view>
			<view class="order">
				<view class="order_message">收获地址:</view>
				<view class="order_message_right">{{ orderMessage.userAddress }}</view>
			</view>
			<h2>订单信息</h2>
			<view class="order">
				<view class="order_message">创建时间:</view>
				<view>{{ orderMessage.createTime }}</view>
			</view>
			<view class="order">
				<view class="order_message">支付时间:</view>
				<view>{{ orderMessage.payTime }}</view>
			</view>



			<view class="order">
				<view class="order_message">支付方式:</view>
				<view>{{ orderMessage.payType | payTypeFilter }}</view>
			</view>
			<view class="order">
				<view class="order_message">配送方式:</view>
				<view> {{ orderMessage.shippingType === 1 ? '邮寄' : '门店自提' }}</view>
			</view>


			<view class="order">
				<view class="order_message">赠送积分:</view>
				<view> {{ orderMessage.gainIntegral }}</view>
			</view>




			<view class="order">
				<view class="order_message">用户备注:</view>
				<view>{{ orderMessage.userRemark ? orderMessage.merchantRemark :'-'  }}</view>
			</view>
			<view class="order">
				<view class="order_message">商家备注:</view>
				<view>{{ orderMessage.merchantRemark  ? orderMessage.merchantRemark:'-' }}</view>
			</view>

		</view>


	</view>
	</view>
</template>

<script>
	import {
		orderDetailApi
	} from '@/api/order.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme.js';
	import {
		orderStatusFilter,
		payTypeFilter
	} from "../utils/filter.js"
	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				orderNo: '', // 订单号
				orderMessage: [], // 订单信息
				orderDetailList: [], // 订单详情列表
			}
		},
		onLoad(option) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.orderNo = option.orderNo
			this.getOrderDetail()
		},
		// 过滤器
		filters: {
			orderStatusFilter, // 订单状态
			payTypeFilter // 支付方式
		},

		methods: {
			// 订单状态的颜色
			getStatusColor(status) {
				if (status === 0) {
					return {
						color: 'blue'
					};
				} else if (status === 1) {
					return {
						color: 'orange'
					};
				} else if (status === 2) {
					return {
						color: 'purple'
					};
				} else if (status === 3) {
					return {
						color: 'green'
					};
				} else if (status === 4) {
					return {
						color: 'red'
					};
				} else if (status === 5) {
					return {
						color: 'gray'
					};
				} else if (status === 6) {
					return {
						color: 'cyan'
					};
				} else if (status === 9) {
					return {
						color: 'pink'
					};
				} else {
					return {
						color: 'black'
					};
				}
			},
			// 获取订单详情数据的功能函数
			async getOrderDetail() {
				try {
					let result = await orderDetailApi(this.orderNo)
					if (result.code == 200) {
						this.orderMessage = result.data,
							this.orderDetailList = result.data.orderDetailList
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss">
	.particulars {
		overflow: hidden;

		.particulars_card_top {
			background-color: #fff;
			margin: 20px;
			padding: 20px;
			border-radius: 10px;

			.particulars_header {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				padding-bottom: 20px;

				.header_left {
					display: flex;
					align-items: center;
				}

				.header_right {
					color: #4583d6;
					font-size: 14px;
					flex-shrink: 0;
					margin-left: 10px;
				}
			}

			.particulars_body {
				.particulars_body_top {
					display: flex;
					padding: 10px 0;
					border-bottom: 1px solid #eee;

					.top_left {
						width: 70px;
						height: 70px;
						margin-right: 15px;
						flex-shrink: 0;
					}

					.top_right {
						font-size: 15px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							line-height: 20px;
						}

						.top_right_weight {
							font-weight: bold;
						}
					}

				}

				.particulars_body_bottom {
					padding-bottom: 20px;
					border-bottom: 1px solid #eee;

					.bottom_list {
						padding: 7px 0;
						display: flex;
						justify-content: space-between;
					}
				}

			}

			.particulars_footer {
				text-align: right;
				padding: 10px;

				.particulars_foote_top {
					font-size: 16px;
					margin-bottom: 10px;
					font-weight: bold;
				}

				.particulars_footer_bottom {
					font-size: 11px;
					opacity: 0.5;
				}
			}
		}

		.particulars_card_bottom {
			background-color: #fff;
			padding: 20px;
			margin: 20px;
			border-radius: 10px;

			h1 {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 20px;
			}

			h2 {
				font-weight: bold;
				margin: 20px 0;
			}

			.order {
				display: flex;
				margin-top: 10px;

				.order_message {
					margin-right: 10px;
					opacity: 0.5;
					flex-shrink: 0;
				}

				.order_message_right {
					// margin-bottom: 10px;
					line-height: 20px;
				}
			}
		}
	}
</style>